<template>
  <div class="teacher-profile">
    <el-dialog :visible.sync="dialogVisible" width='480px' @open="open">
      <!--<teacher-profile/>-->
      <!-- 头像信息，点击可上传 -->
      <div class="teacher-profile-img">
        <el-upload name="avatar" action="/avatar" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess"
                   :show-file-list="false">
          <circle-img :src=teacher.teaAvatar></circle-img>
        </el-upload>
      </div>
      <!-- 学生信息 -->
      <div class="teacher-profile-info">
        <el-form ref="teacherProfileForm" :rules="rules" :model="teacher" label-width="90px">
          <el-form-item label="工号：">
            <div class="teacher-profile-info-input">
              <div class="teacher-profile-info-input-text">
                {{teacher.teaNo}}
              </div>
            </div>
          </el-form-item>
          <el-form-item label="姓名：" prop="teaName">
            <el-input class="teacher-profile-info-input teacher-profile-info-input-name"
                      v-model="teacher.teaName"></el-input>
          </el-form-item>
          <el-form-item label="性别：">
            <div class="teacher-profile-info-left">
              <el-radio v-model="teacher.teaGender" label="男">男</el-radio>
              <el-radio v-model="teacher.teaGender" label="女">女</el-radio>
              <el-radio v-model="teacher.teaGender" label="未知">未知</el-radio>
            </div>
          </el-form-item>
          <el-form-item label="职称：" prop="teaTitle">
            <el-select class="teacher-profile-info-left" v-model="teacher.teaTitle" placeholder="请选择">
              <el-option v-for="item in teaTitles" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学院：" prop="colName">
            <el-input class="teacher-profile-info-input" v-model="teacher.colName"></el-input>
          </el-form-item>
          <el-form-item label="研究方向：" prop="teaResearch">
            <el-input class="teacher-profile-info-input" v-model="teacher.teaResearch"></el-input>
          </el-form-item>
          <el-form-item label="手机号：" prop="teaPhone">
            <el-input class="teacher-profile-info-input" v-model="teacher.teaPhone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" prop="teaEmail">
            <el-input class="teacher-profile-info-input" v-model="teacher.teaEmail"></el-input>
          </el-form-item>
        </el-form>
        <el-row class="teacher-profile-info-row">
          <el-button class="teacher-profile-info-row-left" @click="reset">重置</el-button>
          <el-button class="teacher-profile-info-row-right" type="primary" @click="submit('teacherProfileForm')">提交修改
          </el-button>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CircleImg from '../common/CircleImg'

export default {
  name: 'TeacherProfileDialog',
  components: {
    CircleImg
  },
  props: {
    visible: Boolean,
    teacherNo: String
  },
  data () {
    return {
      dialogVisible: false,
      teacher: {},
      teaTitles: [{
        value: '助教',
        label: '助教'
      }, {
        value: '讲师',
        label: '讲师'
      }, {
        value: '副教授',
        label: '副教授'
      }, {
        value: '教授',
        label: '教授'
      }],
      rules: {
        teaName: [
          { required: true, message: '姓名不能为空！', trigger: 'blur' },
          { max: 10, message: '长度不能超过 10 字符！', trigger: 'blur' }
        ],
        colName: [
          { required: true, message: '学院不能为空！', trigger: 'blur' },
          { max: 30, message: '学院长度不能超过 30 字符!', trigger: 'blur' }
        ],
        teaTitle: [
          { required: true, message: '请选择职称！', trigger: 'change' }
        ],
        teaResearch: [
          { max: 150, message: '研究方向长度不能超过 150 字符!', trigger: 'blur' }
        ],
        teaPhone: [
          { required: true, validator: this.validatePhone, trigger: 'blur' }
        ],
        teaEmail: [
          { required: true, validator: this.validateEmail, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    visible () {
      this.dialogVisible = this.visible
    },
    dialogVisible () {
      this.$emit('update:visible', this.dialogVisible)
    }
  },
  methods: {
    beforeAvatarUpload (file) {
      const isImg = (file.type === 'image/jpg') || (file.type === 'image/jpeg') || (file.type === 'image/png') || (file.type === 'image/bmp')
      if (!isImg) {
        this.$message.error('上传头像图片只能是 JPG/PNG/BMP 格式!')
      }
      return isImg
    },
    handleAvatarSuccess (res) {
      if (res.success) {
        console.log('handleAvatarSuccess:' + res.data.path)
        this.teacher.teaAvatar = res.data.path
      }
    },
    reset () {
      this.teacher = JSON.parse(JSON.stringify(this.$store.state.teacher))
    },
    submit (teacherProfileForm) {
      this.$refs[teacherProfileForm].validate(
        (valid) => {
          if (valid) {
            this.$axios.put('/api/teacher/' + this.teacher.teaNo + '/profile', this.teacher)
              .then(response => {
                let result = response.data
                if (result.success) {
                  console.log(result.data)
                  this.$store.commit('updateTeacher', result.data)
                  this.$notify({ title: '成功', message: '修改成功！', type: 'success' })
                } else {
                  this.$notify.error({ title: '失败', message: result.msg })
                }
              })
              .catch(error => {
                console.log(error)
              })
          }
        })
    },
    // 校验手机号
    validatePhone (rule, value, callback) {
      const phoneReg = /^1(3|4|5|7|8)\d{9}$/
      if (value === '') {
        callback(new Error('手机号不能为空！'))
      } else {
        if (phoneReg.test(value)) {
          callback()
        } else {
          callback(new Error('手机号格式有误!'))
        }
      }
    },
    // 校验邮箱
    validateEmail (rule, value, callback) {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (value === '') {
        callback()
      }
      if (mailReg.test(value)) {
        callback()
      } else {
        callback(new Error('邮箱格式有误!'))
      }
    },
    open () {
      this.$axios.get(`/api/teacher/${this.$store.state.user.account}/profile`)
        .then(response => {
          let result = response.data
          if (result.success) {
            this.teacher = result.data
          }
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .teacher-profile {
    width: 480px;

    .teacher-profile-img {
      width: 120px;
      height: 120px;
      margin: 0 auto 15px auto;
    }

    .teacher-profile-info {
      width: 440px;
      height: 525px;
      margin: 0 auto;

      .teacher-profile-info-input {
        width: 270px;
        float: left;

        .teacher-profile-info-input-text {
          float: left;
        }
      }

      .teacher-profile-info-left {
        float: left;
      }

      .teacher-profile-info-row {
        width: 440px;

        .teacher-profile-info-row-left {
          width: 140px;
          float: left;
          margin-left: 55px;
        }

        .teacher-profile-info-row-right {
          width: 140px;
          float: right;
          margin-right: 55px;
        }
      }
    }
  }
</style>
